<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <div th:replace="header::header" />

</head>

<body>
<div class="am-g am-g-fixed blog-fixed index-page">
    <div class="am-u-md-8 am-u-sm-12">




        <!-- 文章遍历并分页展示 : 需要同学们手动完成，基本样式已经给出，请使用th标签及表达式完成页面展示 -->
        <div th:each="tArticle:${tArticlesList}">
            <article class="am-g blog-entry-article">

                <div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-text">
                    <!-- 文章分类 -->
                    <span class="blog-color"style="font-size: 15px;"><a th:text="${tArticle.categories}">默认分类</a></span>
                    <span>&nbsp;&nbsp;&nbsp;</span>
                    <!-- 发布时间 -->
                    <span style="font-size: 15px;" th:text="${tArticle.createTime}"/>
                    <h2>
                        <!-- 文章标题 -->
                        <div th:text="${tArticle.title}">文章标题<a style="color: #0f9ae0;font-size: 20px;"  />
                        </div>
                    </h2>
                    <!-- 文章内容-->
                    <div style="font-size: 16px;"  th:text="${tArticle.content}">文章内容5</div>
                </div>
            </article>

        </div>
        <div><span class="page dpage">首页</span><span class="page dpage">上一页</span><span class="page">第<a id="oldcurrent" th:text="${startpage}">1</a>页/<a id="endpage" th:text="${pageTotal}">2</a></span><span class="page dpage">下一页</span><span class="page dpage">尾页</span></div>
        <div>
        </div>



    </div>
    <!-- 博主信息描述 -->
    <div class="am-u-md-4 am-u-sm-12 blog-sidebar">
        <div class="blog-sidebar-widget blog-bor">
            <h2 class="blog-text-center blog-title"><span>子慕</span></h2>
            <img th:src="@{/assets/img/me.jpg}" alt="about me" class="blog-entry-img"/>
            <p>
                Java后台开发
            </p>
            <p>个人博客小站，主要发表关于Java、Spring、Docker等相关文章</p>
        </div>
        <div class="blog-sidebar-widget blog-bor">
            <h2 class="blog-text-center blog-title"><span>联系我</span></h2>
            <p>
                <a><span class="am-icon-github am-icon-fw blog-icon"></span></a>
                <a><span class="am-icon-weibo am-icon-fw blog-icon"></span></a>
            </p>
        </div>
    </div>

</div>
<script>
    $(function(){
       $(".dpage").click(function () {
           var clickvalue=$(this).text();
           //起始页数
           var current=1;
           var oldcurrent=parseInt($("#oldcurrent").html());
           var endpage=parseInt($("#endpage").html());
           //分页条数
           if(clickvalue=="下一页"){
               current=oldcurrent+1;
               if(current>endpage){
                   current=endpage;
               }
           }else if(clickvalue=="上一页"){
               current=oldcurrent-1;
               if(current<1){
                   current=1;
               }
           }else if(clickvalue=="尾页"){
               current=endpage;
           }else if(clickvalue=="首页"){
               current=1;
           }
           window.location.href="/baseindex?num=3&startpage="+current;
       })
    })
</script>
</body>
<div th:replace="footer::footer" />
</html>